import styles from './index.less';
import React from 'react';
import { Graph } from '@antv/g6';
import request from '@/http';
import { Button } from 'antd';

export default () => {
  const refDiv = React.useRef<HTMLDivElement>(null);
  const [graphObject, setGraphObject] = React.useState<Graph>();

  const loadDataSource = async (graph:Graph) => {
    const remoteData: any = await request.get('/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json', {
      baseURL: '/api',
    });
    const nodes = remoteData.nodes;
    const edges = remoteData.edges;
    nodes.forEach((node) => {
      if (!node.style) {
        node.style = {};
      }
      node.style.lineWidth = 1;
      node.style.stroke = '#666';
      node.style.fill = 'steelblue';
      switch (node.class) {
        case 'c0': {
          node.type = 'circle';
          break;
        }
        case 'c1': {
          node.type = 'rect';
          node.size = [35, 20];
          break;
        }
        case 'c2': {
          node.type = 'ellipse';
          node.size = [35, 20];
          break;
        }
      }
    });
    edges.forEach((edge) => {
      if (!edge.style) {
        edge.style = {};
      }
      edge.style.lineWidth = edge.weight;
      edge.style.opacity = 0.6;
      edge.style.stroke = 'grey';
    });

    graph.data(remoteData);
    graph.render();
  };

  React.useEffect(() => {
    const graph = new Graph({
      container: refDiv.current as HTMLElement,
      width: 800,
      height: 600,
      defaultNode: {
        size: 30,
        labelCfg: {
          style: {
            fill: '#fff',
          },
        },
      },
      defaultEdge: {
        labelCfg: {
          autoRotate: true,
        },
      },
      layout: {
        type: 'force', // 设置布局算法为 force
        linkDistance: 100, // 设置边长为 100
        preventOverlap: true, // 设置防止重叠
      },
    });

    graph.on('node:dragstart', function(e) {
      graph.layout();
      var {item} = e;
      var model = item?.get('model');
      model.fx = e.x;
      model.fy = e.y;
    });
    graph.on('node:drag', function(e) {
      var {item} = e;
      var model = item?.get('model');
      model.fx = e.x;
      model.fy = e.y;
    });
    graph.on('node:dragend', function(e) {
      var {item} = e;
      var model = item?.get('model');
      model.fx = null;
      model.fy = null;
    });

    graph.on('node:click', (e) => {
      const shape = e.target;
      const node = e.item;
      console.log(e);
    });

    loadDataSource(graph).finally();
    setGraphObject(graph);
    return () => {
      graph.destroy();
    };
  }, []);


  return (
    <div className={styles.flowMain}>
      <div className={styles.flowLeftPanel}>
        <Button type={'primary'} style={{ width: '100%' }} onClick={()=>{
        loadDataSource(graphObject as Graph).finally();
      }}>重新加载</Button>
      </div>
      <div className={styles.flowContainer} ref={refDiv}></div>
      <div className={styles.flowRightPanel}>
        右边
      </div>
    </div>
  );
}
